<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cao</title>
    <style>
        /* 公共样式 */
        body,
        div {
            border: 0;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        a:hover {
            color: red;
            cursor: pointer;
        }

        a:active {
            color: royalblue;
        }

        ul,
        li {
            list-style: none;
        }

        body {
            background-color: #eeeeee;
        }

        /* 设为弹性盒子 */
        .df {
            /* Safari */
            display: -webkit-flex;
            display: flex;
        }

        /* 主轴为y 不换行flex-wrap: nowrap */
        .flexx {
            flex-direction: row;
        }

        /* 主轴为y 不换行flex-wrap: nowrap */
        .flexy {
            flex-direction: column;
        }

        /* 对称轴居中 */
        .aicenter {
            align-items: center;
        }


        /* a标签改成button */
        .btn {
            display: inline-block;
            width: 112px;
            height: 42px;
            padding-top: 10px;
            text-align: center;
            border-radius: 5px;
            /* 阻止a标签的文字被选中 */
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-select: none;
            user-select: none;

            background-color: rgba(0, 0, 0, 0.1);
        }
        /* 被鼠标悬停时 */
        .btn:hover {
            background-color: rgba(0, 0, 0, 0.2);
        }
        /* 按钮被激活时 */
        .btn:active{
            background-color: rgba(0, 0, 0, 0.1);
        }

        /* 左浮动 */
        .fl {
            float: left;
        }

        /* 右浮动 */
        .fr {
            float: right;
        }

        /* 样式 */
        .box {
            margin: auto;
            width: 1157px;
            background-color: #eeeeee;
            padding-top: 35px;
            /* 主轴上的对齐方式 起点对齐*/
            justify-content: stretch;
        }

        .shuru {
            width: 1157px;
            height: 54px;
            margin: auto;
        }

        .caozuo {
            background-color: rgba(red, green, blue, 0);
            justify-content: space-between;
        }

        /* 评论 */
        .ppl{
            line-height: 32px;
        }
        .caozuo>div {
            border: 1px solid rgba(0, 0, 0, 0);
            width: 50%;
            height: 95px;
            /* 操作上内边距 */
            padding-top: 20px;
            /* 下边距 */
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
        }

        .biaoqing {
            display: inline-block;
            width: 42px;
            height: 42px;
        }

        /* 头像 */
        .touxiang{
            width: 60px;height: 60px;
            text-align: center;
            line-height: 55px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            overflow: hidden;
        }

        .mianban{
            width: 1057px;height: 150px;
        }
        .pinglunqu{
            margin-bottom: 50px;
        }
        /* 在之后插入一个空的div阻止浮动对他的影响 */
        .cb:after{
            /* 清除浮动 */
            clear: both;
            /* 内容为空 */
            content: "";
            /* 定义为块级元素 */
            display: block;
        }

        .cb:after{
            /* 清除浮动 */
            clear: both;
            /* 内容为空 */
            content: "";
            /* 定义为块级元素 */
            display: block;
        }



        .us1{
            background-image: url('./imgall/user1.jpg');
            background-repeat:no-repeat;
            background-size: 60px;
        }
        .us2{
            background-image: url('./imgall/user2.jpg');
            background-repeat:no-repeat;
            background-size: 60px;
        }
        .userpl{
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            padding-top: 30px;
        }
    </style>
</head>

<body>
    <div class="box df flexy">
        <div class="shuru">
            <textarea rows="3" style="width: 1157px;
                resize: none;
                border: none;
                padding: 0;
                overflow: hidden; 
                border-radius: 5px;
                outline: none;
                font-size:16px;">说点什么...
            </textarea>
        </div>
        <div class="caozuo df flexx aicenter">
            <!-- 添加表情 -->
            <div class="df flexx aicenter">
                <a href="javascript:">
                    <img class="fl" src="imgall/face.png" alt="">
                    <a href="javascript:">添加表情</a>
                </a>
            </div>
            <div>
                <a class="fr btn ppl">评论</a>
            </div>
        </div>
        <div class="ping">
            <!-- 全部评论 -->
            <div>
                <span>全部评论</span>
                <span>5</span>
            </div>
        </div>
        <div class=" ">
            <div class="pinglunqu cb">
                <!-- 用户1的评论展示清除浮动影响不然头像塌落 -->
                <div class="userpl cb">
                    <!-- 用户1头像昵称评论内容时间戳回复赞 -->
                    <div class="touxiang fl us1"></div>
                    <div class="mianban fr">
                        <div>昵称</div>
                        <div style="overflow: hidden;margin-bottom: 25px;">评论展示板</div>
                        <!-- 时间戳这行草他妈的给老子居中 -->
                        <div class="juzhong cb">
                            <div class="fl">
                                时间戳
                            </div>
                            <div class="fr zannum">
                                <span class="dianzanshu">5</span>
                            </div>
                            <div class="fr" style="margin-right: 10px;">
                                <a class="" href="javascript:">
                                    <img src="imgall/praiseblack.png" alt="">
                                </a>
                            </div>
                            <div class="fr" style="margin-right: 30px;">
                                <a class="" href="javascript:">
                                    <img src="imgall/newsblack.png" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>



                <!-- 用户2的评论展示 -->
                <div class="userpl cb">
                    <!-- 用户1头像昵称评论内容时间戳回复赞 -->
                    <div class="touxiang fl us2"></div>
                    <div class="mianban fr">
                        <div>昵称</div>
                        <div style="overflow: hidden;margin-bottom: 25px;">评论展示板</div>
                        <!-- 时间戳这行草他妈的给老子居中 -->
                        <div class="juzhong cb">
                            <div class="fl">
                                时间戳
                            </div>
                            <div class="fr zannum">
                                <span class="dianzanshu">5</span>
                            </div>
                            <div class="fr" style="margin-right: 10px;">
                                <a class="" href="javascript:">
                                    <img src="imgall/praiseblack.png" alt="">
                                </a>
                            </div>
                            <div class="fr" style="margin-right: 30px;">
                                <a class="" href="javascript:">
                                    <img src="imgall/newsblack.png" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>




            </div>
        </div>
    </div>
</body>

</html>